<template>
  <div id="app">
      <h1 v-html="title"></h1>
      <input v-model="newitem" v-on:keyup.enter="additem">
      <div>
        <ul>
          <li v-for="item in items" v-bind:class="{finished: item.isFinished}" v-on:click="toggle(item)">
            {{item.label}}
          </li>
        </ul>
      </div>
      <p>child tell me:{{childwords}}</p>
      <components-a msgfromfather="eat quick!" v-on:child-tell-me="listenchild"></components-a> 
  </div>
</template>

<script>
  import Store from './store.js'
  import componentsA from './components/componentsA.vue'
  export default {
    data: function(){
      return{
        title:'this is my first Vuejs',
        items:Store.fetch(),
        newitem:'',
        childwords:''
      }
    },
    components: {componentsA},
    methods: {
      toggle: function(item){
        item.isFinished = !item.isFinished
      },
      additem: function(){
        this.items.push({
          label:this.newitem,
          isFinished:false
        }),
        this.newitem=''
      },
      listenchild: function(msg){
        this.childwords = msg
      }
    },
    watch: {
      items:{
        handler: function(items){
          console.log(items)
          Store.save(items)
        },
        deep:true
      }
    }
    
  }
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  color: green;
}
.finished{
  text-decoration: underline;
  color: red;
}
.big{
  font-size: 20px;
  line-height: 30px;
}

</style>
